<template>
  <div>
    <!-- 账号密码 -->
    <base-search :title="t('keys.accountPassword')" :isShowSearch="1"> </base-search>
    <el-row class="mt20">
      <el-col :span="8">
        <el-form ref="pwdFormRef" :model="pwdForm" :rules="rules" label-width="80px" label-position="left">
          <el-form-item :label="t('keys.old_password')" prop="password">
            <el-input
              v-model="pwdForm.password"
              maxlength="16"
              style="width: 100%"
              clearable
              :placeholder="t('keys.Please_enter_the_current_password')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="t('keys.new_password')" prop="newPassword">
            <el-input
              v-model="pwdForm.newPassword"
              minlength="8"
              maxlength="16"
              style="width: 100%"
              clearable
              :placeholder="t('keys.Password_format_error_tips')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="t('keys.confirm_password')" prop="confirmPassword">
            <el-input
              v-model="pwdForm.confirmPassword"
              minlength="8"
              maxlength="16"
              style="width: 100%"
              clearable
              :placeholder="t('keys.Please_enter_the_new_password_again')"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm(pwdFormRef)">{{ t('keys.cancel') }}</el-button>
            <el-button type="primary" @click="pwdSubmit(pwdFormRef)">{{ t('keys.ok') }}</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { reactive, ref, unref, onActivated } from 'vue'
import { ElMessage } from 'element-plus'
import { ERR_OK } from 'config/statusCode'
import { useRouter } from 'vue-router'
import { postUpdatePasswordApi } from 'api/home'
import { validPasswordNew } from 'utils/validate'
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 中英文
const router = useRouter()
const pwdFormRef = ref(null)
const pwdForm = ref({
  password: '',
  newPassword: '',
  confirmPassword: ''
})
const validateNewPassword = (rule, value, callback) => {
  if (!value) {
    callback(new Error(t('keys.Please_enter_a_new_password')))
  } else if (!validPasswordNew(value)) {
    callback(new Error(t('keys.Password_format_error_tips')))
  } else {
    callback()
  }
}
const validateConfirmPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error(t('keys.Please_enter_the_confirmation_password')))
  } else if (value !== pwdForm.value.newPassword) {
    callback(new Error(t('keys.The_two_passwords_are_inconsistent')))
  } else {
    callback()
  }
}
const rules = reactive({
  password: [{ required: true, message: t('keys.Please_enter_the_original_password'), trigger: 'blur' }],
  newPassword: [{ required: true, validator: validateNewPassword, trigger: 'blur' }],
  confirmPassword: [{ required: true, validator: validateConfirmPassword, trigger: 'blur' }]
})
// 重置参数
const resetForm = (ruleFormRef) => {
  if (!ruleFormRef) return
  const form = unref(ruleFormRef)
  form.resetFields()
  showPwdDialog.value = false
  showPhoneDialog.value = false
}
// 提交修改密码
const pwdSubmit = async (pwdFormRef) => {
  if (!pwdFormRef) return
  await pwdFormRef.validate(async (valid, fields) => {
    if (valid) {
      // putUserInfo()
      const params = { ...pwdForm.value }
      const { code, desc } = await postUpdatePasswordApi(params)
      if (code === ERR_OK) {
        ElMessage({
          message: t('keys.modified'),
          type: 'success'
        })
        showPwdDialog.value = false
      }
    } else {
    }
  })
}
</script>
<style lang="scss" scoped>
.mt20 {
  margin-top: 20px;
  :deep(.el-form) {
    min-width: 370px;
  }
}
</style>
